<!--
 * @Author: lixb
 * @Date: 2020-08-24 15:36:05
 * @LastEditTime: 2020-09-23 17:50:55
 * @Descripttion: 钉钉授权表单详情
-->
<template>
  <el-drawer
    title="钉钉授权"
    :visible.sync="isShow"
    :direction="direction"
    :before-close="handleClose"
    :wrapper-closable="false"
    size="40%"
  >
    <div class="dd-authorization">
      <el-form
        ref="dataForm"
        :model="dataForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-dataForm"
      >
        <el-form-item label="APPKey：" prop="APPKey">
          <el-input v-model="dataForm.APPKey"></el-input>
        </el-form-item>
        <el-form-item label="APPSecret：" prop="APPSecret">
          <el-input v-model="dataForm.APPSecret"></el-input>
        </el-form-item>
        <el-form-item label="操作指引：">
          <div class="operation-guide">
            <span>1.登录钉钉开放平台的管理后台：</span>
            <p>
              <strong>https://open-dev.dingtalk.com/#/index</strong>
            </p>

            <p>2.创建应用。创建企业内部开发，类型是H5微应用；</p>
            <p>
              3.设置接口权限。创建完企业内如开发应用后，设置权限， 其中，通讯录只读权限、手机
              号码信息，这两个权限，必 须授权，否则无法同步；
            </p>
            <p>
              在本页面填写APPKey和APPSecret；详情操作教程，请点击
              <el-link type="primary" href="">下载</el-link>
              查看。
            </p>
          </div>
        </el-form-item>
        <div class="footer-button">
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="submitForm('dataForm')">保存</el-button>
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
  export default {
    components: {},
    props: {
      isShow: {
        required: true,
        type: Boolean,
      },
    },
    data() {
      return {
        direction: 'rtl',
        dataForm: {
          APPKey: '',
          APPSecret: '',
        },
        rules: {
          APPKey: [{ required: true, message: '请输入APPKey', trigger: 'blur' }],
          APPSecret: [{ required: true, message: '请输入APPSecret', trigger: 'blur' }],
        },
      };
    },
    watch: {},
    methods: {
      /**
       * @Author: lixb
       * @Date: 2020-08-25 14:27:48
       * @msg: 提交绑定钉钉方法
       */
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // eslint-disable-next-line no-unused-vars
            let params = {
              APPKey: this.dataForm.APPKey,
              APPSecret: this.dataForm.APPSecret,
            };
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-25 14:28:03
       * @msg: 关闭弹窗
       */
      handleClose() {
        this.$emit('closeAuthDrawer');
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-drawer__body {
    padding: 20px;
  }
  .operation-guide {
    color: #7f848b;
    font-size: 14px;
  }
</style>
